<!--  -->
<template>
  <div>
    <div class="todo-footer"
         v-if="todoList.length">
      <label>
        <!-- <input type="checkbox"
               :checked="allChecked"
               @click="selectAll" /> -->
        <input type="checkbox"
               v-model="allChecked" />
      </label>
      <span>
        <span>已完成{{hasDone}}</span> / 全部{{totalNum}}
      </span>
      <button class="
               btn
               btn-danger"
              @click="clearAll">清除已完成任务</button>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {

    }
  },
  props: ['todoList', "selectAllItem", "clearAllDoneItem"],
  computed: {
    // 1.已完成多少的计算属性
    hasDone () {
      // 1.1 计算count使用了forEach方法:low
      // let count = 0
      // this.todoList.forEach((item) => {
      //   if (item.done) {
      //     count++
      //   }
      // })
      // return count
      // 1.2 使用reduce方法计数:cool
      return this.todoList.reduce((pre, current) => {
        return pre + (current.done == true ? 1 : 0)
      }, 0)
    },
    // 2.总共有多少
    totalNum () {
      return this.todoList.length
    },
    // 3.多选框是否选中
    allChecked: {
      get () {
        // 1.自己写的：重新把这些计算属性又写了一遍
        // let count = 0
        // this.todoList.forEach((item) => {
        //   if (item.done) {
        //     count++
        //   }
        // })
        // if (count == this.todoList.length) {
        //   return true
        // } else {
        //   return false
        // }
        // 2.直接使用上面的计算属性：方便又省事
        return this.hasDone == this.totalNum && this.totalNum > 0
      },
      set (value) {
        this.selectAllItem(value)
      }
    }
  },
  methods: {
    // 全选或者反选
    selectAll (e) {
      // console.log(e.target.checked);
      this.selectAllItem(e.target.checked)
    },
    // 清除已完成的任务
    clearAll () {
      this.clearAllDoneItem()
    }
  },
  //生命周期 - 创建完成（访问当前this实例）
  created () {

  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted () {

  }
}
</script>
<style scoped>
/* @import url(); 引入css类 */
/*footer*/
.todo-footer {
  height: 40px;
  line-height: 40px;
  padding-left: 6px;
  margin-top: 5px;
}

.todo-footer label {
  display: inline-block;
  margin-right: 20px;
  cursor: pointer;
}

.todo-footer label input {
  position: relative;
  top: -1px;
  vertical-align: middle;
  margin-right: 5px;
}

.todo-footer button {
  float: right;
  margin-top: 5px;
}
</style>